Cách hoạt động JSONP

Khi trang web có địa chỉ a.com lấy dữ liệu từ một địa chỉ khác là b.com sẽ bị giới hạn gọi là Same origin policy. Theo chính sách này thì các yêu cầu cần phải có cùng một địa chỉ (từ a.com gọi a.com). Để giải quyết vấn đề, giải pháp jsonp được đưa ra với hai bước giải quyết:

  • a.com và b.com quy định chung tham số sẽ trả về (ví dụ "callback")trên URL
  • a.com định nghĩa thực hiện (implement) hàm "callback"
  • Từ nơi gọi (a.com) dùng javascript yêu cầu (gọi) máy chủ đích (b.com) theo URL quy định ví dụ `http://myserver/getjson?callback=mycallback`
  • Máy chủ đích (b.com) xử lý dữ liệu, và thực hiện việc gọi hàm "callback" được truyền theo URL

Cụ thể mã hoạt động như sau

  • Phía Client (web browser)

Mã nơi gọi yêu cầu (viết với jquery):

$.ajax({  url:"http://myserver/getjson?callback=mycallback", // lưu ý chữ mycallback = hàm phải a.com phải thực hiện,.                                                      // ở đây jquery tự động gán vào hàm success,  data: {"userid": "1234"}, // tùy chọn  dataType: 'json',   success:function(j){   alert("Success:" +j); // hàm "f"  },  error:function(a, b){   alert("Error"); }});
  • Phía Server

Lưu ý: Server phải lấy tham số callback gọi từ client

Mã server trả lời (python)

# 1. lấy tên hàm callbackf = self.request.params.get('callback') # hàm f# 2. trả lời với dữ liệu json {'a':1}self.response.out.write(cb+"({a:1})") # tương đương với việc gọi hàm f({a:1})

Mã server trả lời (PHP)

// 1. lấy tên hàm callback$cb = $_GET['callback'] # 2. trả lời với dữ liệu json {'a':1}$array = array('a'=>1);echo $cb."(".json_encode($array).");"